<template>
  <div style="height: 100%">
    <el-container style="min-height: 100vh">
      <el-aside :width="sidewidth+ 'px'" style="background-color: rgb(167,15,37); box-shadow: beige">
<Aside :is-collapse="isCollapse" :showtext="showtext"/>
      </el-aside>

      <el-container>
        <el-header style="border-bottom: 1px solid #42b983;background-color: aquamarine;">
      <Header :collapse-btn-class="collapseBtnClass" :collapse="collapse"/>
        </el-header>

        <el-main>
<!--          表示当前页面的子路由会在router-view里面展示-->
     <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import request from "@/utils/request";
import Aside from "@/components/Aside";
import Header from "@/components/Header";
export default {
  name: 'HomeView',
  components: {Header, Aside},
  data() {
    return {
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sidewidth: 200,
      showtext: true,
      user:{}
    }

  },
comments:{
    Aside,
  Header
},

  methods: {

    collapse() {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.sidewidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.showtext = false
      } else {
        this.sidewidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.showtext = true
      }
    },
    getUser(){
  let username=localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")).username:""
  let menus=localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")).menus:[]

      if (username){
        this.request.get("/users/"+username).then(res=>{
          this.user=res.data
        })

      }

    }
  }


}
</script>
<style>
.headerBg {
  background: #eee !important;
}
</style>